<template>
  <div class="ke-header">
    <ke-logo />
    <div class="search">
      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </div>
    <div class="login" @click="handleToLoginPage" v-if="!userInfo">
      <span>登录</span>
    </div>
    <div v-else class="userInfo">
      <div class="demo-basic--circle">
        <div class="block" @click="handleToMine">
          <el-avatar :size="50" :src="circleUrl"></el-avatar>
          <span>{{userInfo}}</span>
        </div>
      </div>
    </div>
    <div class="loginOut">
      <el-button type="primary" size="mini" @click="handleLogout">退出</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ke-header',
  inject: ['reload'],
  components: {
    keLogo: () => import('../ke-logo')
  },
  data() {
    return {
      input: '',
      select: '',
      circleUrl: '',
      isShowLoginOut: false
    }
  },
  computed: {
    userInfo() {
      return localStorage.ke_nickName
    }
  },
  mounted() {
    this.circleUrl =
      localStorage.getItem('ke_avatr') === 'undefined'
        ? 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        : localStorage.getItem('ke_avatar')
  },
  methods: {
    handleToLoginPage() {
      this.$router.push('/login')
    },
    handleShowLoginOut() {
      this.isShowLoginOut = true
    },
    handleHiddleLoginOut() {
      this.isShowLoginOut = false
    },
    handleToMine() {
      this.$router.push('/mine/timetable')
      localStorage.getItem('ke_info')
    },
    handleLogout() {
      localStorage.removeItem('ke_token')
      localStorage.removeItem('ke_nickName')
      localStorage.removeItem('ke_avatar')
      localStorage.removeItem('ke_identity')
      localStorage.removeItem('ke_id')
      localStorage.removeItem('ke_personalized')
      localStorage.removeItem('ke_email')
      this.$router.push('/login')
    },
    search() {
      this.$axios
        .post('/api/course/search', {
          keyword: this.input
        })
        .then(res => {
          this.$store.dispatch('getSearch', res.data.data.ret)
          if (this.$router.app._route.path !== '/search') {
            this.$router.push('/search')
          } else {
            this.reload()
            console.log('==========')
          }
        })
        .catch(err => {
          throw err
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-header {
  position: relative;
  height: 80px;
  width: 1200px;
  margin: 0 auto;
  color: #333333;

  &::after {
    display: block;
    content: '';
    clear: both;
  }

  .search {
    position: absolute;
    display: inline-block;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;

    /deep/.el-select .el-input {
      width: 80px;
    }

    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }

    /deep/.el-input-group__append {
      background-color: rgb(35, 184, 255);
      border: 1px solid rgb(35, 184, 255);
      border-left: none;

      .el-icon-search {
        font-size: 20px;
        color: #eeeeee;
        font-weight: bolder;
      }
    }
  }

  .login {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #444444;
    cursor: pointer;
  }

  .userInfo {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #444444;
    cursor: pointer;
    margin-left: 20px;

    .block {
      position: relative;
    }
  }

  .loginOut {
    position: absolute;
    right: -60px;
    top: 20px;
  }
}
</style>
